useRef
是一個函式,跟useState
一樣接收一個參數,作為變數初始值。
不過 useRef
只會回傳一個有 current
屬性 的 Object 。當更新 current 值並不會觸發 re-render
const renderCount = useRef(0);
// renderCount ={ current: 0 }
component 在 state 變化時會重新渲染,但當我有一些數值不想被重新渲染影響時我們就可以使用useRef
不過除了這些 useRef還有以下使用情境
1.計算 render 次數
2.綁定 DOM 來控制 DOM 身上的一些事件
3.設定previous 的 State,不過也可以透過 useState達到,以下會附上範例
小筆記:更新
useRef
是 side Effect 的行為,所以記得寫在useEffect
或 event handler 裡面
直接講這麼多不如直接呈現範例吧
function App() {
const renderCount = useRef(0);
useEffect(() => {
console.count("change state 次數");
renderCount.current += 1;
});
return (
<p>render 次數:{renderCount.current}</p>
);
}
function App() {
const inputRef = useRef();
// 情景二:綁定 DOM
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus</button>
</div>
);
}
function App() {
const [counter, setCounter] = useState(0);
const [prevCount, setPrevCount] = useState(counter);
const previousValue = useRef('');
useEffect(() => {
// 情境三:用來記憶前值
previousValue.current = counter
}, [counter]);
return (
<div>
<p>數字:點了 {counter} 次</p>
<p>前一數值:{previousValue.current}</p>
<p>前一數值state呈現:{prevCount}</p>
<button
onClick={() => {
setCounter((counter) => counter + 1);
setPrevCount(counter);
}}
>
Click me !
</button>
</div>
);
}
這邊奉上 codepen 以供參考